<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {
  getAppDoc,
  type IAppController,
  type IApiDefinition,
  sendApiRequest,
  type IApiRequest
} from "../../apis/core/api";

const appControllers = ref<IAppController[]>([]);

const apiRequest = reactive<IApiRequest>({
  url: '',
  method: '',
  params: '',
  data: ''
})

const sendApiDefinition = (apiDefinition: IApiDefinition) => {
  apiRequest.url = apiDefinition.url
  apiRequest.method = apiDefinition.method
  sendApiRequest(apiRequest).then((result) => {
    if (result.success) {

    }
  })
}

onMounted(() => {
  getAppDoc().then((result) => {
    if (result.success) {
      appControllers.value = result.data;
    }
  })
})
</script>

<template>
  <el-scrollbar class="appDoc">
    <el-card v-for="appController in appControllers" class="appControllers">
      <template #header>
        <el-tag effect="plain" class="tag-style">{{ appController.code }}</el-tag>
        {{ appController.name }}
      </template>
      <el-collapse>
        <el-collapse-item v-for="apiDefinition in appController.apiDefinitions">
          <template #title>
            <el-tag v-if="apiDefinition.method === 'GET'" class="tag-style">
              {{ apiDefinition.method }}
            </el-tag>
            <el-tag v-if="apiDefinition.method === 'POST'" type="success" class="tag-style">
              {{ apiDefinition.method }}
            </el-tag>
            <el-tag v-if="apiDefinition.method === 'PUT'" type="warning" class="tag-style">
              {{ apiDefinition.method }}
            </el-tag>
            <el-tag v-if="apiDefinition.method === 'PATCH'" type="info" class="tag-style">
              {{ apiDefinition.method }}
            </el-tag>
            <el-tag v-if="apiDefinition.method === 'DELETE'" type="danger" class="tag-style">
              {{ apiDefinition.method }}
            </el-tag>
            {{ apiDefinition.name }}
          </template>
          <el-descriptions title="请求参数" direction="vertical" column="4" border>
            <template #extra>
              <el-button type="primary" @click="sendApiDefinition(apiDefinition)">发送请求</el-button>
            </template>
            <el-descriptions-item label="方法名称：" align="center">{{ apiDefinition.code }}</el-descriptions-item>
            <el-descriptions-item label="请求路径：" align="center">{{ apiDefinition.path }}</el-descriptions-item>
            <el-descriptions-item label="鉴权规则：" align="center">{{ apiDefinition.rule }}</el-descriptions-item>
            <el-descriptions-item label="时间规则：" align="center">{{ apiDefinition.timeFilter }}</el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="请求结果" direction="vertical" column="1" border>
            <el-descriptions-item label="返回结果" align="center">123</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
      <template #footer>创建时间：</template>
    </el-card>
  </el-scrollbar>
  <!--  <el-container>-->
  <!--    <el-aside width="20%">-->
  <!--      <div>应用名称：{{ appDoc.code }} - {{ appDoc.name }}</div>-->
  <!--      <div>应用类型：{{ appDoc.type }}</div>-->
  <!--      <div>当前版本：{{ appDoc.version }}</div>-->
  <!--      <div v-for="appController in appDoc.appControllers" @click="selectAppController(appController)">-->
  <!--        {{ appController.code }} - {{ appController.name }}-->
  <!--      </div>-->
  <!--    </el-aside>-->
  <!--    <el-main>-->
  <!--      <el-collapse>-->
  <!--        <el-collapse-item v-for="apiDefinition in apiDefinitions">-->
  <!--          <template #title>-->
  <!--            <el-tag>{{ apiDefinition.method}}</el-tag>-->
  <!--            {{ apiDefinition.name }}-->
  <!--          </template>-->
  <!--          <el-card>-->
  <!--            <template #header>-->
  <!--              {{ apiDefinition.url}}-->
  <!--            </template>-->
  <!--            <div>123</div>-->
  <!--            <template #footer>Footer content</template>-->
  <!--          </el-card>-->
  <!--        </el-collapse-item>-->
  <!--      </el-collapse>-->
  <!--    </el-main>-->
  <!--  </el-container>-->
</template>

<style scoped>
.appDoc {
  padding: 0px 15px;
  height: calc(100vh - 100px);
}

.appControllers {
  margin-bottom: 20px;
}

.tag-style {
  margin-right: 5px;
}
</style>